<template>
  <main-card-admin :title="roleDetail.name" :crumbs="crumbs" :show-screen-space="false">
    <template #tool-btn>
      <a-space>
        <a-button v-auth="'admin-role-manage-delete'" class="icon-with-btn" @click="handleDelete">
          <template #icon><i class="iconfont icon-delete-bin-line"></i></template>
          删除
        </a-button>
        <a-button v-auth="'admin-role-manage-edit'" class="icon-with-btn" @click="goEdit(roleDetail.id)">
          <template #icon><i class="iconfont icon-edit-line"></i></template>
          编辑
        </a-button>
      </a-space>
    </template>
    <template #screen-space> </template>
    <a-row class="time-block" :align="'middle'">
      <a-col class="mr-16"> 创建时间</a-col>
      <a-col class="mr-24 time-value"> {{ roleDetail.createTime }}</a-col>
      <a-col class="mr-24 shu" />
      <a-col class="mr-16"> 更新时间</a-col>
      <a-col class="time-value"> {{ roleDetail.updateTime }}</a-col>
    </a-row>

    <a-form ref="formRef" :model="roleDetail" name="basic" class="my-a-form" label-align="left" scroll-to-first-error>
      <a-form-item label="角色名称*">
        <div class="info-text">{{ roleDetail.name }}</div>
      </a-form-item>
      <a-form-item label="描述">
        <div class="info-text">{{ roleDetail.description || '/' }}</div>
      </a-form-item>
      <a-form-item label="角色状态*">
        <div class="info-text">{{ roleDetail.status || '/' }}</div>
      </a-form-item>
      <a-form-item label="角色权限*">
        <auth-menu-select v-if="roleDetail.childrenTree.length" readonly :menu-data="roleDetail.childrenTree" />
      </a-form-item>
    </a-form>
  </main-card-admin>

  <delete-confirm-dialog
    v-model:show="isDeleteDialogShow"
    :msg="`已有${currentCollection}个人使用此角色，请确认是否删除？`"
    :label="`请输入角色名称`"
    :loading="confirmLoading"
    :confirm-name="roleDetail.name"
    @ok="onOkDeleteTask"
  />
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { computed, reactive, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute, useRouter } from 'vue-router'

  import MainCardAdmin, { Crumb } from '@/components/MainCardAdmin/index.vue'
  import { roleApi } from '@/services/api'

  import AuthMenuSelect from '../components/AuthMenuSelect.vue'
  import { MenuItem } from '../types'

  interface Role {
    id: string
    name: string
    description: string
    createTime: string
    updateTime: string
    status: '禁用' | '可用'
    childrenTree: MenuItem[]
  }

  const route = useRoute()
  const router = useRouter()

  const roleId = route.params.id as string //角色id
  const formRef = ref()

  const roleDetail = reactive<Role>({
    id: roleId,
    name: '',
    description: '',
    childrenTree: [],
    status: '可用',
    createTime: '',
    updateTime: ''
  })
  const crumbs = computed<Crumb[]>(() => [
    { name: '角色管理', path: '/role-manage/list' },
    {
      name: `角色详情（${roleDetail.name}）`
    }
  ])

  const getRoleDetail = async () => {
    console.log(roleId)

    const res = await roleApi.detail({}, { urlParams: { id: roleId } })
    Object.assign(roleDetail, res.data)
  }

  const goEdit = (id?: string) => {
    router.push(`/role-manage/edit/${id}`)
  }

  /* 删除---------------------------------------------------------------------------------------------------- */
  const isDeleteDialogShow = ref(false)
  // 使用该角色的账号数
  const currentCollection = ref(0)

  const { runAsync: getUserRun } = useRequest<ResponseData<number>>((id: string) => roleApi.getBindingNum(id)(), {
    onSuccess: ({ data }: { data: number }) => {
      currentCollection.value = data
    }
  })
  const { loading: confirmLoading, runAsync: runDelRole } = useRequest(roleApi.del)

  const onOkDeleteTask = async () => {
    await runDelRole({}, { urlParams: { id: roleDetail.id || '' } })
    message.success('该角色已删除')
    isDeleteDialogShow.value = false
    router.back()
  }
  const handleDelete = () => {
    isDeleteDialogShow.value = true
    getUserRun(roleDetail.id)
  }
  /* ---------------------------------------------------------------------------------------------------- */

  const init = async () => {
    getRoleDetail()
  }

  init()
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  .time-block {
    padding-left: 24px;
    margin-bottom: 40px;
    width: 100%;
    height: 36px;
    color: @text03;
    background-color: @background3;
    border-radius: 6px;

    .time-value {
      color: @text01;
    }

    .shu {
      width: 1px;
      height: 20px;
      background-color: @border2;
    }
  }

  .my-a-form {
    padding-left: 24px;
    width: 968px;

    .ant-form-item {
      margin-bottom: 40px;

      :deep(.ant-form-item-label) {
        width: 120px;

        & > label {
          &::after {
            display: none;
          }
        }
      }

      .info-text {
        word-break: break-all;
        color: @text02;
        .font14b();
      }
      // 调整表单项间距之后，需考虑到出现错误提示的字段的高度，为24px000
      &.ant-form-item-with-help {
        margin-bottom: 16px;
      }
    }

    .ant-form-item:last-of-type {
      margin-bottom: 0;
    }

    .auth-select-title {
      margin-bottom: 8px;
      .font14b();
      // 黑色星号*
      &::after {
        display: inline-block !important;
        font-size: 14px;
        font-family: SimSun, sans-serif;
        color: @text02;
        font-weight: 700;
        line-height: 1;
        content: '*';
        transform: translate(2px, -1px);
      }
    }

    .ant-collapse {
      background-color: #fff;
      border: none;

      .ant-collapse-item {
        overflow: hidden;
        border: 1px solid @border2;
        border-radius: 6px;

        :deep(.ant-collapse-header) {
          align-items: center;
          height: 54px;

          .my-a-collapse-header {
            width: 100%;
            height: 100%;

            .header-title {
              .font14b();

              color: @text01;
            }

            .header-num {
              color: @text02;

              &.disabled {
                color: @text04;
              }
            }
          }
        }

        :deep(.ant-collapse-content-box) {
          padding: 0;
        }

        & + .ant-collapse-item {
          margin-top: 16px;
        }
      }

      .iconfont {
        font-size: 20px;

        &.rotate-90 {
          transform: rotate(90deg);
        }
      }
    }

    .form-footer {
      margin-top: 64px;
    }
  }
</style>
